拡張子というのは、画像や音楽などあらゆるファイルの名前の末尾につけられている文字列のことです。「ファイル名.●●」の「.●●」の部分ですね！
この記事では「主にWEB上で使われる画像」の代表的な拡張子の種類やそれぞれどんな時に適しているのかなどを簡単に紹介していければと思います。
GIF（.gif）
読み方：ジフ
最大256色で表現されるファイル形式です。色数が少ない画像を書き出すのに適しています。透過処理も出来て、容量も軽いため、ロゴやアイコンやボタンなどに最適な形式です。色数が少ないほどファイルサイズは小さくなります。
またGIFは可逆性圧縮形式の画像です。可逆圧縮とは、簡単に説明すると可逆圧縮は劣化が生じない圧縮方式の事です。一度保存した画像を再度加工したりリサイズをしても、画像が劣化しません。
【GIF 色数64 18KB】
上の絵は塗りが単色で色数が少ないので、綺麗に書き出す事が出来ました。
ただ、色数が多いもの、グラデーションを多用した絵や写真などを書き出す時には向いていません。
【GIF 色数64 25KB】
こちらは先ほどと同じ線画にグラデーションを多用して色を塗ったものです。先ほど載せた絵と同じく書き出しの際の色数は64ですが、画像のあちこちにノイズが発生してしまっています。
色数を多くして書き出せばもう少し綺麗に処理出来ますが、色数が増えるほどファイルサイズは大きくなってしまいます。
またGIFはアニメーションを作る事が出来ます。「アニGIF」と呼ばれるものです。
アニGIFについてはぜひこちらの記事も参照してみてください↓
簡単！なめらかなアニメGIFの作り方
PNG（.png）
読み方：ピング
約1677万色を表現出来る画像形式で、文字や図形などが含まれフチがはっきりしている画像、グラデーションや色数の多い画像に適しています。透過処理も出来ます。(※種類による 後述します)
またPNGもGIFと同じく可逆性圧縮なので画像の劣化が起きません。
ただGIFや後述のJPGと比べると、ファイルサイズが大きくなってしまう事が特徴です。
【PNG24 63KB】
GIFで全く同じ画像を色数256色(最大)で書き出すと22KBでしたが、PNGにすると一気に63KB…およそ3倍になりました。
高画質にはなりますが、大きな画像を多用するページでPNGをたくさん使うと少し重くなってしまうかもしれません。
またPNGには種類が3つあり、「PNG32」「PNG24」と「PNG8」というのがあります。
フルカラーで表現出来るPNGは「PNG32」と「PNG24」の事を指します。
PNG32とPNG24の違い
PNG32はPNG24を更に高画質に、そして透過情報を持たせたものです。PNG24の透明な部分はあくまで「透明な部分を表現している」のであり、厳密には透過ではないのです。
PNG32にもなるととてつもなくファイルサイズが大きくなるのであまりWEBには適していません。WEBでよく使われるのは「PNG24」、もしくはこれからご紹介する「PNG8」が主流になっています。
PNG8とは
GIFと同じように256色で表現される形式です。透過も出来て容量も軽いので、PNG8もGIFように色数の少ないデータを書き出す際に向いています。
ほぼGIFと同じなのですが、違いをあげるとするとグラデーションなどを含んだ画像において、PNG8の方がGIFよりファイルサイズが小さくなります。
同じ写真をそれぞれGIF、PNG8で保存して比較してみましたが…見た目に差異はありませんが、PNG8の方が少しファイルサイズが小さいですね。
まあ最終的にGIFを選ぶかPNG8を選ぶかは、個人の好みかな～と思います！
私は「画像PNGで欲しいです！容量200KB以下で！」と言われたら大体PNG8で書き出すようにしています。あとPNG8の事はピンパチと呼んでいます。多分日本でこう呼んでいる方は多い。はず。
JPG（.jpg）
読み方：ジェイペグ JPEGと表記されることもある
約1677万色を表現出来る画像形式です。写真などの色数の多い画像に向いています。そこまで聞くとPNGと同じじゃん？と思いますが、JPGは他の形式に比べ容量を軽くする事が出来るのが特徴です。GIF、PNGと違って透過処理は出来ません。
またJPGは、「非可逆圧縮」です。非可逆圧縮は、可逆圧縮と逆で保存を重ねるほど画像が劣化していってしまいます。一度そうなってしまったら元のオリジナルデータには戻せません。
一般的にJPGは写真向きの形式と言われています。スマホで撮った写真は基本的にJPGで保存されています。
単色のものやフチがはっきりしているものはぼやけてしまったり劣化が激しいのでJPGにはあまり向きません。
【JPG 最高画質】
画質も細かく調整して書き出しが行えるので、ファイルサイズと相談しながら圧縮が行えます。ただあまりにも圧縮すると劣化がわかりやすく表れてしまいます。
【JPG 低画質】
ガサガサになってしまいますがファイルサイズはこれでなんと10KB。
まとめ
・ロゴ、アイコンなどの色数が少ない～単色でフチがはっきりしているもの、アニメーションはGIF
・GIFのアニメーション以外の要素はPNG8でも代用出来るので用途によって使い分ける
・色数が多く、高画質に書き出したいイラストや画像はPNG24かPNG32(透過と容量に注意)
・写真はJPGが一般的(圧縮率に注意)
長々と書いてしまいましたが、まとめるとWEBで画像を扱う際はこのポイントを抑えておけば問題ないと思います。
今回はWEBで中心に使われている拡張子に特化して書きましたが、他にも色々な拡張子があるのでそれもまたいずれ紹介出来たらなあと思います。
いかがでしたでしょうか～ぜひ参考になれば幸いです。
それでは！寒さにお気をつけて！ユイPでした。
ツイッター↓
ユイP＠デジマースブログ
他の記事をさがす ⇒ 記事一覧へ